<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./nav.css">
    <link rel="stylesheet" href="./environment.css">
</head>
<body>
    <!-- 导航栏 -->
    <!-- 主题：环境(首页)，动物，措施，中国 -->
    <!-- 基本架构：轮播图，各种各样的flex布局，固定导航，输入建议 -->
    <!-- 亮点：css的动画， -->
    <nav>
        <div class="main_nav">
            <a href="./index.html" style="color: gray;">
                <p>环境</p>
            </a>
            <a href="./其他网页/animal.html">
                <p>动物</p>
            </a>
            <a href="./其他网页/meature.html">
                <p>措施</p>
            </a>
            <a href="https://gitee.com/yihyp/my-first-codebase.git" style="width: 200px;">
                <p>码云仓库</p>
            </a>
         
        </div>
    </nav>
    <article>
        <!-- 第一部分：轮播图 -->
        <!-- 第二部分：各种各样flex布局 -->
        <!-- 第三部分: 尾部 -->

        <div class="first">
            <div class="first_left">
                <p class="first_left_head">环境之重</p>
                <span>1.这环境，犹如一部无声的诗篇，静谧而深邃。每一寸土地，每一缕风，都在诉说着大自然的神奇与美丽。</span>
                <span>2.翠绿的树林，清新的空气，优美的环境让人们感受到大自然的恩赐。</span>
                <span>3.周围的树木和花朵，绿意盎然，色彩斑斓，构成了一个美丽而宁静的生态环境。</span>
                <span>4.青山绿水映晴空，这片环境宛如仙境，让人心旷神怡，乐而忘返。</span>
                <span>5.周围的自然环境如同一幅美丽的画卷，绿意盎然，让人心旷神怡。</span>
                <span>6.绿意盎然的草坪，鲜花盛开的花园，构成了城市中的一片宁静之地。</span>
                <img src="./image/first_left.webp" alt="" class="first_left_img">
            </div>
            <div class="first_right">
                <div class="banner">
                    <img src="./image/环境1.webp" alt="">
                    <img src="./image/环境3.webp" alt="">
                    <img src="./image/环境4.webp" alt="">
                    <p style="left: 0;" onclick="banner_p(-1)">&lt;</p>
                    <p style="right: 0;" onclick="banner_p(1)">&gt;</p>
                    <div class="banner_span">
                        <span onclick="banner_span_click(1)"></span>
                        <span onclick="banner_span_click(2)"></span>
                        <span onclick="banner_span_click(3)"></span>
                    </div>
                </div>
                <hr style="margin-top: 20px">
                <div class="display_one">
                    <img src="./image/first_right2.webp" alt="" class="display_one_bigger">
                    <p>保护环境</p>
                    <p>人人有责</p>
                    <p>无需理由</p>
                </div>
            </div>
    
        </div>
        <hr style="margin-top: 50px;">
        <h1 style="margin: auto;width: 75%;margin-top: 30px;margin-bottom: 20px;">一 、鸟语花香</h1>
        <div class="second">
           
            <div class="flower">
                <div class="flower1">
                    <img src="./image/flower1.webp" alt="">
                    <p>那一片片向日葵，像一个个金黄的小太阳，为大地增添了无尽的温暖。向日葵的芬芳，渲染着夏日的明媚，她的金黄花瓣在阳光下熠熠生辉，如同太阳的使者，向大地传递着温暖和希望。</p>
                </div>
                <div class="flower2">
                    <img src="./image/flower2.webp" alt="">
                    <p>鸟儿们翩翩起舞，它们轻盈的身姿如诗如画，给大自然增添了一抹生动与活泼的气息。鸟儿用其婉转的歌声，唤醒了沉睡的大地，为大自然注入了无尽的活力。</p>
                </div>

            </div>
        </div>
        <hr style="margin-top: 50px;">
        <h1 style="margin: auto;width: 75%;margin-top: 30px;margin-bottom: 20px;">二 、大好山河</h1>

        <div class="third">
            <div>
                <img src="./image/river1.webp" alt="">
                <p>青山绿水映晴空，祖国河山壮丽中。万里江山皆如画，神州大地任逍遥。祖国的山河如画卷，秀美壮观，宛如人间仙境。</p>
            </div>
            <div>
                <img src="./image/river2.webp" alt="">
                <p>“一寸山河一寸金，千里江山入画来。”在这片广袤的土地上，祖国的山河如同一幅气势磅礴的画卷，等待我们去探索和欣赏。</p>
            </div>
        </div>

    </article>
    <footer>
        <div class="ani">
            保护环境，你我他，靠大家。
        </div>
    </footer>
    <script src="./environment.js"></script>
</body>
</html>